<template>
	<div>
		<el-row>
			<!--<iframe src="http://192.168.1.48:8080" width="100%" height=""></iframe>-->
			<el-col :span="6">
					<div @mouseenter="openSubject" @mouseleave="closeSubject">
						<div class="currentTitle">{{ currentGrade }}{{ currentSubject }}</div>
						<el-collapse-transition>
						<div class="subject" v-if="showAllsubject">
							<div v-for="item in subjectList">
								<p>{{ item.name }}</p>
								<div v-for="x in item.subject" @click="chooseSubject(item,x)">
									{{ x.name }}
								</div>
							</div>
						</div>
						</el-collapse-transition>
					</div>
				<div class="knowledge">
					<p>章节选择</p>
					<el-tree :data="treeData" :props="defaultProps" accordion @node-click="chooseKnowledge"></el-tree>
				</div>
			</el-col>
			<el-col :span="18" class="rightContent">
				<div class="questionType clearfix top">
					<span class="title">课件类型:</span>
					<div class="content">
						<div @click="chooseDocumentType(0)" :class="{active:currentType_id==0}">全部</div>
						<div v-for="item in DocumentTypeList" @click="chooseDocumentType(item.id)" :class="{active:currentType_id==item.id}">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="content ">
					<div v-for="(item,index) in currentDocumentList" class="clearfix">
							<div :class="item.file_ext " class="left"></div>	
							<div class="middle">
								<p :title="item.file_name">{{ item.file_name }}</p>
								<p>大小:{{ transSize(item.file_size) }}</p>
							</div>
							<a :href="item.file_path">下载</a>
					</div>
					<div v-if="currentDocumentList.length==0">
						抱歉！暂无相关课件
					</div>
				</div>
				<el-pagination class="pagination" background layout="prev, pager, next" :page-size="15" :current-page="page" :total="count" @current-change="changePage"></el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import api from '../../api';
	import { getObjByprop,getSeriDate } from '../../util/util'
	const qs = require('qs')
	export default {
		data() {
			return {
				loading: true,
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				checkedIds: [],
				subjectList: [],
				currentGrade: '',
				currentSubject: '',
				showAllsubject: false,
				currentSubjectId: 1,
				currentCategory_id: 4111,
				DocumentTypeList: [],
				currentType_id: 1,
				treeData: [],
				currentDocumentList: [],
				currentQuestionId: 0,
				page: 1,
				count: 0

			}
		},
		components: {},
		created() {
			var that = this
			api.getListSubject().then(response => {
				that.subjectList = response.data.datalist;
				that.currentGrade = that.subjectList[0].name;
				that.currentSubject = that.subjectList[0].subject[0].name;
				//初始化知识点结构
				that.getKnowledges(1, 0)
				//获取题目列表
				that.getListDocument()
			})			
			//获取课件类型
			api.getDocumentType().then(response=>{
				that.DocumentTypeList=response.data.datalist
			})
			/*
			//轮询找出空课件的知识点
			let subjectData=[]
			let noDataStr=''
			let categoryData=[]
			api.getListSubject().then(response => {
				let subjectList=response.data.datalist;
				for(let a=0;a<subjectList.length;a++){
					for(let b=0;b<subjectList[a].subject.length;b++){
						subjectData.push(subjectList[a].subject[b].id)
					}
				}
				function x(arr){
					for(let i=0;i<arr.length;i++){
						if(arr[i].son){
							x(arr[i].son)
						}else{
							categoryData.push(arr[i])
						}
					}
				}
				for(let c=0;c<subjectData.length;c++){
					api.getKnowledges({
						'subject_id': subjectData[c],
						'type': 1
					}).then(response => {
						let arr=response.data.datalist;
						x(arr)
//						for(let j=0;j<categoryData.length;j++){
//							api.getListDocument({
//								category_id: categoryData[j],
//								type_id: this.currentType_id,
//								page: this.page
//							}).then(response => {
//								that.currentDocumentList = response.data.datalist
//								that.count = Number(response.data.count)	
//							})
//						}
					})
				}
			})*/
			
			
			
		},
		methods: {
			openSubject() {
				this.showAllsubject = true;
			},
			closeSubject() {
				this.showAllsubject = false
			},
			chooseSubject(item, x) {
				this.loading = true;
				this.currentSubjectId = x.id;
				this.currentGrade = item.name;
				this.currentSubject = x.name;
				this.getKnowledges(this.currentSubjectId, 0);
			},
			getKnowledges(subject_id, type) {
				var that = this;
				this.loading = true;
				this.page = 1;
				api.getKnowledges({
					'subject_id': subject_id,
					'type': type
				}).then(response => {
					var data = JSON.stringify(response.data.datalist).replace(/son/g, 'children').replace(/name/g, 'label');
					that.treeData = JSON.parse(data)
					//获取知识点的时候重置当前知识点的id
					that.currentCategory_id = that.treeData[0].children[0].id
					//重新获取课件
					that.getListDocument()
				})
			},
			chooseDocumentType(_id) {
				this.loading = true;
				this.page = 1;
				this.currentType_id = _id;
				this.getListDocument();
			},
			getListDocument(params) {
				var that = this;
				api.getListDocument({
					category_id: this.currentCategory_id,
					type_id: this.currentType_id,
					page: this.page
				}).then(response => {
					that.currentDocumentList = response.data.datalist
					that.count = Number(response.data.count)	
				})
			},
			chooseKnowledge(data) {
				this.loading = true;
				//深度大于等于2的时候才可以获取到试题信息
				if(Number(data.depth) >= 2) {
					//重置题目的难易度等级
					this.currentLevel_id=1;
					this.currentCategory_id = data.id
					this.getListDocument()
				}else{
					this.loading = false;
				}
			},
			changePage(page) {
				this.loading = true;
				this.page = page;
				this.getListDocument()
			},
			transSize(size){
				var size = Number(size)
				size = size.toFixed(2)
				if(size < 1024) {
					return size + 'b'
				} else if(size < 1048576) {
					return(size / 1024).toFixed(2) + 'Kb'
				} else if(size < 1048576*1024) {
					return(size / 1048576).toFixed(2) + 'Mb'
				} else if(size >= 1048576*1024) {
					return(size / (1048576*1024)).toFixed(2) + 'Gb'
				}
			}
		},
	watch:{
		currentDocumentList:function(){
			this.$nextTick(function () {
  				this.loading=false
  			})
		}
	}
	}
</script>

<style scoped>
	iframe {
		width: 100%;
		height: 700px;
		frameborder: 0;
		border: none;
	}
	.currentTitle {
		background-color: #14acf4;
		color: white;
		font-size: 16px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: default;
		transition: all 0.5s;
	}
	
	
	.subject {
		cursor: default;
		border-bottom: 1px dashed #999999;
		padding-bottom: 22px;
		margin-bottom: 16px;
	}
	
	.subject>div {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-bottom: 10px;
	}
	
	.subject>div>p {
		width: 100%;
		margin: 7px auto;
		color:#14acf4;
		font-size: 18px;
	}
	
	.subject>div>div {
		width: 25%;
		font-size: 14px;
	}
	.subject>div>div:hover{
		color: #14acf4;
	}
	.questionType {}
	.knowledge>p{
		margin-top: 8px;
		font-size: 14px;
		font-weight: bold;
	}
	.tree{
		color:#999999;
	}
	.tree>.treeitem .el-tree-node__label{
		color: #14acf4;
	}
	.el-col.el-col-6{
		margin-top: 2px;
	}
	.questionType {}
	
	.top {
		margin: 10px auto;
	}
	
	.top>span {
		width: 80px;
		margin-top: 5px;
		float: left;
		text-align: right;
		font-size: 14px;
		font-weight: bold;
	}
	
	.top>.content {
		float: left;
		width: 87%;
		cursor: default;
		margin-left: 10px;
	}
	
	.top>.content>div {
		display: inline-block;
		padding: 5px 15px;
		font-size: 14px;
		color: #999999;
	}
	.top>.content>div:hover{
		color: #14ACF4;
		cursor: pointer;
	}
	.top>.content>div.active {
		background-color: #14acf4;
		color: white;
	}
	
	.rightContent {
		padding-left: 20px;
		cursor: default;
		position: relative;
	}
	.rightContent:before{
		content: '';
		display: block;
		position: absolute;
		left: -2px;
		height: calc(100% - 42px);
		width: 2px;
		top: 42px;
		background-color: #F2F2F2;
	}
	
	.rightContent>.content {
	}
	
	.rightContent>.content>div {
		padding-top: 16px;
		border-top: 1px dashed #F2F2F2;
		padding-bottom: 6px;
	}
	.rightContent>.content>div>div{
		float: left;
	}
	.rightContent>.content>div>.left {
		width: 60px;
		height: 60px;
		margin-left: 20px;
	}
	.doc, .docx{
		background: url(../../assets/images/word.png) no-repeat;
	}
	.ppt, .pptx{
		background: url(../../assets/images/ppt.png) no-repeat;
	}
	.rightContent>.content>div>.middle{
		width: 70%;
	}
	.rightContent>.content>div>.middle>p{
		overflow: hidden;
		height: 35px;
		line-height: 35px;
		padding-left: 20px;
		font-size: 14px;
	}
	.rightContent>.content>div>.middle>p:nth-of-type(2){
		font-size: 12px;
		line-height: 16px;
		color: #999999;
	}
	.rightContent>.content>div>a{
		float: right;
		width: 80px;
		height: 30px;
		background-color: #14acf4;
		color: white;
		line-height: 30px;
		text-align: center;
		margin-top: 15px;
		margin-left: 30px;
		font-size: 14px;
		text-decoration: none;
	}
	.rightContent>.content>div>a:hover{
		background-color: rgba(20,172,244,0.8);
		cursor: pointer;
	}
	.pagination{
		margin-top: 15px;
		float: right;
		padding-bottom: 40px;
	}
</style>